<template>
  <view class="member-container">
    <!-- 会员卡片区域 - 顶部显示用户基本信息和等级 -->
    <view class="member-card">
      <!-- 卡片背景渐变层 -->
      <view class="member-card-bg"></view>
      <!-- 会员头像和基本信息区域 -->
      <view class="member-header">
        <view class="member-avatar-section">
          <!-- 用户头像，点击可跳转到个人信息页面 -->
          <image class="member-avatar" :src="memberInfo.avatarUrl || '/static/icons/default-avatar.png'" @click="navigateTo('/pages/my/myMessage')"></image>
          <view class="member-name-level">
            <!-- 用户昵称，如不存在则显示默认名称 -->
            <text class="member-name">{{memberInfo.nickName || '禅心用户'}}</text>
            <!-- 会员等级标签member-leve -->
            <view class="member-level" @tap="showLevelPrivileges">
              <text>{{(memberInfo.grade?.name) || "普通会员"}}</text>
            </view>
          </view>
        </view>
        <!-- 二维码按钮，点击显示二推广码 -->
        <view class="member-qrcode" @tap="showQRCode">
          <image class="qrcode-icon" src="/static/icons/QRCode.png"></image>
        </view>
      </view>
      
      <!-- 会员数据统计区域 - 显示积分和佣金 -->
      <view class="member-stats">
        <!-- 积分项，点击跳转到积分页面 -->
        <view class="stat-item" @click="navigateTo('/pages/my/Integral')">

          <text class="stat-value">{{memberInfo.points || 0}}</text>
          <text class="stat-label">功德分</text>
        </view>
        <!-- 分隔线 -->
        <view class="stat-divider"></view>
        <!-- 佣金项，点击跳转到提现页面 -->
        <view class="stat-item" @click="navigateTo('/pages/my/extract')">

          <text class="stat-value">¥{{memberInfo.balance || '0.00'}}</text>



          <text class="stat-label">余额</text>
        </view>
      </view>
    </view>
    
    <!-- 快捷功能区域 - 常用功能的快速入口 -->
    <view class="quick-actions-section">
      <view class="quick-action-grid">
        <!-- 每日打卡入口 -->
        <view class="quick-action-item" @tap="navigateTo('/pages/my/Clock')">
          <view class="quick-action-icon-wrapper">
            <image class="quick-action-icon" src="/static/icons/points.png"></image>
          </view>
          <text class="quick-action-name">每日打卡</text>
        </view>
        <!-- 我的订单入口 -->
        <view class="quick-action-item" @tap="navigateTo('/pages/my/order')">
          <view class="quick-action-icon-wrapper">
            <image class="quick-action-icon" src="/static/icons/order.png"></image>
          </view>
          <text class="quick-action-name">我的订单</text>
        </view>
        <!-- 购物车入口 -->
        <view class="quick-action-item" @tap="navigateTo('/pages/shapping/cart')">
          <view class="quick-action-icon-wrapper">
            <image class="quick-action-icon" src="/static/icons/coupon.png"></image>
          </view>
          <text class="quick-action-name">购物车</text>
        </view>
        <!-- 收货地址入口 -->
        <view class="quick-action-item" @tap="navigateTo('/pages/my/address')">
          <view class="quick-action-icon-wrapper">
            <image class="quick-action-icon" src="/static/icons/address.png"></image>
          </view>
          <text class="quick-action-name">收货地址</text>
        </view>
        <!-- 余额充值入口 -->
        <view class="quick-action-item" @tap="navigateTo('/pages/my/recharge')">
          <view class="quick-action-icon-wrapper">
         <!-- 功德分充值 -->
            <uni-icons type="gift" size="24" color="#000"></uni-icons>
          </view>
          <text class="quick-action-name">功德捐赠</text>
        </view>
      </view>
    </view>
    
    <!-- 推广中心区域 - 团队管理和分享功能 -->
    <view class="promotion-section">
      <!-- 区域标题 -->
      <view class="section-header">
        <text class="section-title">禅境中心</text>
        <view class="section-title-underline"></view>
      </view>
      
      <!-- 推广卡片列表 -->
      <view class="promotion-cards">
        <!-- 我的团队卡片 - 展示团队信息 -->
        <view class="team-card" @tap="navigateTo('/pages/my/team')">
          <view class="team-card-content">
            <view class="team-card-left">
              <view class="team-title">
                <image class="team-icon" src="/static/icons/team.png"></image>
                <text>禅境守护团</text>
              </view>
              <!-- 显示已邀请的好友数量 -->
              <view class="team-count">已有 {{memberInfo.total_invite || 0}} 位好友加入</view>
            </view>
            <view class="team-card-right">
              <image class="team-preview" src="/static/images/team-tree-preview.png"></image>
              <image class="arrow-icon" src="/static/icons/arrow-right.png"></image>
            </view>
          </view>
        </view>
        
        <!-- 分享卡片 - 推广分享功能 -->
        <view class="share-card" @tap="sharePromotion">
          <view class="share-card-content">
            <image class="share-icon" src="/static/icons/share.png"></image>
            <view class="share-info">
              <text class="share-title">分享禅友</text>
              <text class="share-desc">践行禅意文化</text>
            </view>
            <!-- 分享按钮，使用微信小程序的开放能力 -->
            <button class="share-button" open-type="share">善意推广</button>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 会员等级权益弹窗 - 显示不同等级会员的权益 -->
    <view class="modal" v-if="showLevelModal">
      <!-- 遮罩层，点击关闭弹窗 -->
      <view class="modal-mask" @tap="hideLevelPrivileges"></view>
      <view class="modal-container">
        <!-- 弹窗标题栏 -->
        <view class="modal-header">
          <text class="modal-title">会员等级权益</text>
          <view class="modal-close" @tap="hideLevelPrivileges">×</view>
        </view>
        
        <!-- 弹窗内容区域，可滚动 -->
        <scroll-view class="modal-body" scroll-y>
          <!-- 等级选项卡 -->
          <view class="level-tabs">
            <view 
              v-for="(level, index) in memberLevels" 
              :key="index"
              class="level-tab" 
              :class="{ active: currentLevelTab === index }"
              @tap="switchLevelTab(index)"
            >
              <text>{{level.name}}</text>
			 
            </view>
			
          </view>
          
          <!-- 等级详情内容 -->
          <view class="level-content">
            <view class="level-privileges">
				   <!-- 展示证书图片 -->
              <image :src="getImageSrc(memberLevels[currentLevelTab].name)" mode="aspectFit"></image>
              
              <!-- 使用富文本展示会员权益内容 -->
              <rich-text :nodes="getTextarea(memberLevels[currentLevelTab].remark)"></rich-text>
			  
            </view>
          </view>
        </scroll-view>
        
        <!-- 弹窗底部按钮 -->
        <view class="modal-footer">
          <button class="modal-button" @tap="hideLevelPrivileges">我知道了</button>
        </view>
      </view>
    </view>
    
    <!-- 二维码弹窗 - 显示推广二维码 -->
    <view class="modal" v-if="showQRModal">
      <!-- 遮罩层，点击关闭弹窗 -->
      <view class="modal-mask" @tap="hideQRCode"></view>
      <view class="qr-modal-container">
        <!-- 弹窗标题栏 -->
        <view class="modal-header">
          <text class="modal-title">我的推广码</text>
          <view class="modal-close" @tap="hideQRCode">×</view>
        </view>
        
        <!-- 二维码显示区域 -->
        <view class="qr-code-display">
          <image class="qr-code-image" :src="qrcode" mode="aspectFit"></image>
          <text class="qr-code-tip">扫码加入我的团队</text>
        </view>
        
        <!-- 弹窗底部按钮 -->
        <view class="modal-footer">
          <button class="modal-button save-button" @tap="saveQRCode">保存图片</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getQrCode, gradeListApi } from '../../api/user'; // 导入用户相关API
import { userStore } from '../../store/userStore'; // 导入用户状态管理
import { saveBase64, textareaCon } from '../../utils'; // 导入工具函数

const user = userStore(); // 初始化用户状态

export default {
  data() {
    return {
      showLevelModal: false, // 控制会员等级弹窗显示
      showQRModal: false, // 控制二维码弹窗显示
      currentLevelTab: 0, // 当前选中的会员等级标签索引
      qrcode: "", // 存储推广二维码图片
      memberLevels: [], // 存储会员等级列表
    }
  },
  computed: {
    // 计算属性：获取用户信息
    memberInfo() {
      return user.userInfo;
    }
  },
  onLoad() {
    // 页面加载时获取会员等级列表
    gradeListApi().then((res) => {
      this.memberLevels = res;
    });
    
    // 页面加载时获取用户推广二维码
    getQrCode().then((res) => {
      this.qrcode = res.qrcode;
    });
  },
  // 小程序分享功能配置
  onShareAppMessage() {
    return {
      title: "天禅境", // 分享标题
      path: "/pages/index/share?referee=" + user.user_id, // 分享路径，带推荐人ID
      imageUrl: "../../static/logo.png" // 分享图片
    }
  },
  methods: {
	  //获取证书图片
	  getImageSrc(name) {
      console.log(name);
	    // 根据会员等级名称返回对应证书图片
	    if(name=="如来者"){
	      return "https://file.wykji.cn/uploads/20250504/f16d1e7883c599e418ff49b9880bede6.png"
	    } else if(name=="守护使者"){
	      return "https://file.wykji.cn/uploads/20250504/005698ef05fc9254081a0307a2092eb7.png"
	    }
	    return ""; // 添加默认返回值
	  },
    // 页面导航方法
    navigateTo(url) {
      uni.navigateTo({
        url: url
      });
    },
    
    // 显示会员等级权益弹窗
    showLevelPrivileges() {
      // 根据当前会员等级设置默认选中的标签页
      if (this.memberInfo.level === 'basic') this.currentLevelTab = 0;
      else if (this.memberInfo.level === 'silver') this.currentLevelTab = 1;
      else if (this.memberInfo.level === 'gold') this.currentLevelTab = 2;
      else if (this.memberInfo.level === 'platinum') this.currentLevelTab = 3;
      
      this.showLevelModal = true; // 显示弹窗
    },
    
    // 隐藏会员等级权益弹窗
    hideLevelPrivileges() {
      this.showLevelModal = false;
    },
    
    // 切换会员等级标签
    switchLevelTab(index) {
      this.currentLevelTab = index;
    },
    
    // 显示推广二维码弹窗
    showQRCode() {
      this.showQRModal = true;
    },
    
    // 隐藏推广二维码弹窗
    hideQRCode() {
      this.showQRModal = false;
    },
    
    // 保存推广二维码到相册
    saveQRCode() {
      uni.showLoading({
        title: '保存中...' // 显示加载提示
      });
      saveBase64(this.qrcode); // 调用保存base64图片的工具函数
      uni.hideLoading(); // 隐藏加载提示
    },
    
    // 分享推广链接（预留功能，暂未实现）
    sharePromotion() {
      return;
    },
    
    // 格式化文本内容（用于富文本显示）
    getTextarea(str) {
      return textareaCon(str);
    }
  }
}
</script>

<style>
/* 全局样式 */
.member-container {
  background-color: #F9F7F2; /* 米白色背景，营造禅意氛围 */
  min-height: 100vh; /* 最小高度为视窗高度 */
  padding: 24rpx; /* 页面内边距 */
  box-sizing: border-box; /* 盒模型设置，使padding不增加宽度 */
}

/* 会员卡片样式 */
.member-card {
  position: relative; /* 相对定位，用于内部元素绝对定位 */
  border-radius: 24rpx; /* 圆角边框 */
  overflow: hidden; /* 超出部分隐藏 */
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1); /* 阴影效果 */
  margin-bottom: 24rpx; /* 底部外边距 */
}

.member-card-bg {
  position: absolute; /* 绝对定位作为背景 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #E8C97D, #B7995D); /* 金色渐变背景 */
  z-index: 1; /* 设置层级，确保在底层 */
}

.member-header {
  position: relative; /* 相对定位 */
  display: flex; /* 弹性布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
  padding: 32rpx; /* 内边距 */
  z-index: 2; /* 确保在背景之上 */
}

.member-avatar-section {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
}

.member-avatar {
  width: 120rpx; /* 头像宽度 */
  height: 120rpx; /* 头像高度 */
  border-radius: 60rpx; /* 圆形头像 */
  border: 4rpx solid rgba(255, 255, 255, 0.6); /* 白色边框 */
  margin-right: 24rpx; /* 右侧外边距 */
}

.member-name-level {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
}

.member-name {
  font-size: 36rpx; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  color: #FFFFFF; /* 白色文字 */
  margin-bottom: 12rpx; /* 底部外边距 */
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1); /* 文字阴影 */
}

.member-level {
  align-items: center; /* 垂直居中 */
  background-color: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
  border-radius: 30rpx; /* 圆角 */
  text-align: center;
}

.member-level text {
  font-size: 24rpx; /* 字体大小 */
  color: #FFFFFF; /* 白色文字 */
}

.member-qrcode {
  width: 72rpx; /* 宽度 */
  height: 72rpx; /* 高度 */
  background-color: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
  border-radius: 36rpx; /* 圆形 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.qrcode-icon {
  width: 40rpx; /* 图标宽度 */
  height: 40rpx; /* 图标高度 */
}

.member-stats {
  position: relative; /* 相对定位 */
  display: flex; /* 弹性布局 */
  justify-content: space-around; /* 均匀分布 */
  align-items: center; /* 垂直居中 */
  padding: 32rpx; /* 内边距 */
  background-color: rgba(255, 255, 255, 0.15); /* 半透明白色背景 */
  border-top: 1rpx solid rgba(255, 255, 255, 0.2); /* 顶部边框 */
  z-index: 2; /* 确保在背景之上 */
}

.stat-item {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 居中对齐 */
}

.stat-value {
  font-size: 40rpx; /* 字体大小 */
  color: #FFFFFF; /* 白色文字 */
  font-weight: bold; /* 粗体 */
  margin-bottom: 8rpx; /* 底部外边距 */
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1); /* 文字阴影 */
}

.stat-label {
  font-size: 24rpx; /* 字体大小 */
  color: rgba(255, 255, 255, 0.9); /* 半透明白色文字 */
}

.stat-divider {
  width: 2rpx; /* 分隔线宽度 */
  height: 64rpx; /* 分隔线高度 */
  background-color: rgba(255, 255, 255, 0.3); /* 半透明白色 */
}

/* 快捷功能区域样式 */
.quick-actions-section {
  background-color: #FFFFFF; /* 白色背景 */
  border-radius: 24rpx; /* 圆角 */
  padding: 32rpx; /* 内边距 */
  margin-bottom: 24rpx; /* 底部外边距 */
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05); /* 阴影 */
}

.quick-action-grid {
  display: flex; /* 弹性布局 */
  justify-content: space-between; /* 两端对齐 */
}

.quick-action-item {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 居中对齐 */
  width: 25%; /* 宽度为25%，每行4个 */
}

.quick-action-icon-wrapper {
  width: 96rpx; /* 图标容器宽度 */
  height: 96rpx; /* 图标容器高度 */
  border-radius: 48rpx; /* 圆形 */
  background-color: #F7F5EF; /* 浅米色背景 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  margin-bottom: 16rpx; /* 底部外边距 */
  transition: all 0.3s; /* 过渡动画 */
}

.quick-action-item:hover .quick-action-icon-wrapper {
  background-color: #F0EAD6; /* 悬停时背景色变化 */
  transform: scale(1.05); /* 悬停时放大效果 */
}

.quick-action-icon {
  width: 48rpx; /* 图标宽度 */
  height: 48rpx; /* 图标高度 */
}

.quick-action-name {
  font-size: 24rpx; /* 字体大小 */
  color: #5A4A3F; /* 棕色文字 */
}

/* 推广中心样式 */
.promotion-section {
  background-color: #FFFFFF; /* 白色背景 */
  border-radius: 24rpx; /* 圆角 */
  padding: 32rpx; /* 内边距 */
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05); /* 阴影 */
}

.section-header {
  margin-bottom: 32rpx; /* 底部外边距 */
  position: relative; /* 相对定位 */
}

.section-title {
  font-size: 32rpx; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  color: #4D3F33; /* 深棕色 */
}

.section-title-underline {
  position: absolute; /* 绝对定位 */
  left: 0;
  bottom: -12rpx;
  width: 80rpx; /* 宽度 */
  height: 6rpx; /* 高度 */
  background-color: #E2C675; /* 金色 */
  border-radius: 3rpx; /* 圆角 */
}

.promotion-cards {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 24rpx; /* 元素间距 */
}

.team-card {
  background-color: #F9F7F2; /* 浅米色背景 */
  border-radius: 20rpx; /* 圆角 */
  overflow: hidden; /* 超出部分隐藏 */
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04); /* 阴影 */
  transition: all 0.3s; /* 过渡动画 */
}

.team-card:active {
  transform: scale(0.98); /* 点击时缩小效果 */
}

.team-card-content {
  display: flex; /* 弹性布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
  padding: 28rpx; /* 内边距 */
}

.team-card-left {
  flex: 1; /* 占据剩余空间 */
}

.team-title {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 16rpx; /* 底部外边距 */
}

.team-icon {
  width: 40rpx; /* 图标宽度 */
  height: 40rpx; /* 图标高度 */
  margin-right: 12rpx; /* 右侧外边距 */
}

.team-title text {
  font-size: 28rpx; /* 字体大小 */
  color: #4D3F33; /* 深棕色 */
  font-weight: 600; /* 字体粗细 */
}

.team-count {
  font-size: 24rpx; /* 字体大小 */
  color: #A89B88; /* 淡棕色 */
}

.team-card-right {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
}

.team-preview {
  width: 100rpx; /* 宽度 */
  height: 100rpx; /* 高度 */
  margin-right: 16rpx; /* 右侧外边距 */
}

.arrow-icon {
  width: 32rpx; /* 宽度 */
  height: 32rpx; /* 高度 */
  opacity: 0.5; /* 透明度 */
}

.share-card {
  background: linear-gradient(135deg, #E8C97D, #78A77F); /* 金绿渐变背景 */
  border-radius: 20rpx; /* 圆角 */
  overflow: hidden; /* 超出部分隐藏 */
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); /* 阴影 */
}

.share-card-content {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  padding: 28rpx; /* 内边距 */
}

.share-icon {
  width: 55rpx; /* 宽度 */
  height: 55rpx; /* 高度 */
  margin-right: 24rpx; /* 右侧外边距 */
}

.share-info {
  flex: 1; /* 占据剩余空间 */
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
}

.share-title {
  font-size: 28rpx; /* 字体大小 */
  color: #FFFFFF; /* 白色 */
  font-weight: 600; /* 字体粗细 */
  margin-bottom: 8rpx; /* 底部外边距 */
}

.share-desc {
  font-size: 24rpx; /* 字体大小 */
  color: rgba(255, 255, 255, 0.9); /* 半透明白色 */
}

.share-button {
  background-color: rgba(255, 255, 255, 0.25); /* 半透明白色背景 */
  border: none; /* 无边框 */
  border-radius: 40rpx; /* 圆角 */
  color: #FFFFFF; /* 白色文字 */
  font-size: 24rpx; /* 字体大小 */
  padding: 12rpx 36rpx; /* 内边距 */
  margin: 0; /* 外边距为0 */
}

/* 弹窗样式 */
.modal {
  position: fixed; /* 固定定位 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999; /* 最高层级 */
}

.modal-mask {
  position: absolute; /* 绝对定位 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色背景 */
}

.modal-container {
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 底部对齐 */
  left: 0;
  right: 0;
  background-color: #FFFFFF; /* 白色背景 */
  border-radius: 32rpx 32rpx 0 0; /* 顶部圆角 */
  overflow: hidden; /* 超出部分隐藏 */
  max-height: 80vh; /* 最大高度 */
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
}

.qr-modal-container {
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 居中偏移 */
  background-color: #FFFFFF; /* 白色背景 */
  border-radius: 24rpx; /* 圆角 */
  width: 600rpx; /* 固定宽度 */
  overflow: hidden; /* 超出部分隐藏 */
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
}

.modal-header {
  display: flex; /* 弹性布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
  padding: 28rpx 32rpx; /* 内边距 */
  border-bottom: 1rpx solid #F0EAD6; /* 底部边框 */
}

.modal-title {
  font-size: 32rpx; /* 字体大小 */
  color: #4D3F33; /* 深棕色 */
  font-weight: 600; /* 字体粗细 */
}

.modal-close {
  font-size: 48rpx; /* 字体大小 */
  color: #A89B88; /* 淡棕色 */
  height: 48rpx; /* 高度 */
  width: 48rpx; /* 宽度 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.modal-body {
  padding: 32rpx; /* 内边距 */
  max-height: 60vh; /* 最大高度 */
}

.level-tabs {
  display: flex; /* 弹性布局 */
  border-bottom: 1rpx solid #F0EAD6; /* 底部边框 */
  margin-bottom: 24rpx; /* 底部外边距 */
}

.level-tab {
  flex: 1; /* 平均分配空间 */
  text-align: center; /* 文本居中 */
  padding: 20rpx 0; /* 内边距 */
  font-size: 28rpx; /* 字体大小 */
  color: #A89B88; /* 淡棕色 */
  position: relative; /* 相对定位 */
}

.level-tab.active {
  color: #4D3F33; /* 激活状态文字颜色 */
  font-weight: 600; /* 粗体 */
}

.level-tab.active::after {
  content: ''; /* 伪元素内容 */
  position: absolute; /* 绝对定位 */
  bottom: -1rpx; /* 底部对齐 */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 居中偏移 */
  width: 40%; /* 宽度 */
  height: 4rpx; /* 高度 */
  background-color: #E2C675; /* 金色 */
  border-radius: 2rpx; /* 圆角 */
}

.level-privileges {
  font-size: 28rpx; /* 字体大小 */
  color: #5A4A3F; /* 棕色 */
  line-height: 1.6; /* 行高 */
}

.qr-code-display {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 居中对齐 */
  padding: 48rpx 32rpx; /* 内边距 */
}

.qr-code-image {
  width: 400rpx; /* 宽度 */
  height: 400rpx; /* 高度 */
  margin-bottom: 24rpx; /* 底部外边距 */
}

.qr-code-tip {
  font-size: 24rpx; /* 字体大小 */
  color: #A89B88; /* 淡棕色 */
}

.modal-footer {
  padding: 24rpx 32rpx; /* 内边距 */
  border-top: 1rpx solid #F0EAD6; /* 顶部边框 */
}

.modal-button {
  width: 100%; /* 宽度 */
  height: 80rpx; /* 高度 */
  line-height: 80rpx; /* 行高 */
  text-align: center; /* 文本居中 */
  background-color: #78A77F; /* 青瓷绿色 */
  color: #FFFFFF; /* 白色 */
  font-size: 28rpx; /* 字体大小 */
  border-radius: 40rpx; /* 圆角 */
  border: none; /* 无边框 */
}

.save-button {
  background-color: #E2C675; /* 金色按钮 */
}
</style>